<template>
  <div class="quick-answer-container">
    <!-- 顶部信息栏 -->
    <van-nav-bar
      title="抢答模式"
      left-text="返回"
      left-arrow
      @click-left="$router.back()"
    />

    <!-- 题目区域 -->
    <div class="question-area">
      <div class="timer" :class="{ 'warning': timeLeft <= 5 }">
        {{ timeLeft }}秒
      </div>

      <div class="question-content">
        <h3>第 {{ currentQuestion + 1 }} 题</h3>
        <p>{{ questions[currentQuestion]?.text }}</p>
      </div>

      <div class="answer-status" v-if="answerStatus">
        <van-icon
          :name="answerStatus === 'correct' ? 'success' : 'cross'"
          :color="answerStatus === 'correct' ? '#07c160' : '#ee0a24'"
          size="24"
        />
        <span>{{ answerStatus === 'correct' ? '回答正确' : '回答错误' }}</span>
      </div>
    </div>

    <!-- 选项区域 -->
    <div class="options-area">
      <van-button
        v-for="(option, index) in options"
        :key="index"
        block
        round
        :color="getOptionColor(option)"
        :disabled="!canAnswer || answered"
        @click="submitAnswer(option.value)"
        class="option-btn"
      >
        <span class="option-label">{{ option.label }}</span>
        {{ option.text }}
      </van-button>
    </div>

    <!-- 抢答按钮 -->
    <div class="quick-answer-btn" v-if="!canAnswer">
      <van-button
        type="primary"
        size="large"
        round
        :disabled="!canQuickAnswer || quickAnswerDisabled"
        @click="grabQuestion"
      >
        {{ quickAnswerText }}
      </van-button>
    </div>

    <!-- 抢答结果提示 -->
    <van-dialog
      v-model:show="showResultDialog"
      title="抢答结果"
      show-cancel-button
      confirm-button-text="下一题"
      @confirm="nextQuestion"
    >
      <div class="result-content">
        <p v-if="quickAnswerResult === 'success'">抢答成功！请选择答案</p>
        <p v-else>很遗憾，抢答失败</p>
      </div>
    </van-dialog>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue';
import { showToast, showDialog } from 'vant';

// 模拟题目数据
const questions = ref([
  {
    text: 'Vue3 中 Composition API 的主要作用是？',
    options: [
      { label: 'A', value: 'A', text: '替代 Options API' },
      { label: 'B', value: 'B', text: '更好的代码组织和复用' },
      { label: 'C', value: 'C', text: '提高模板渲染性能' },
      { label: 'D', value: 'D', text: '简化组件通信' }
    ],
    correctAnswer: 'B'
  },
  // 更多题目...
]);

const currentQuestion = ref(0);
const timeLeft = ref(15);
const canAnswer = ref(false);
const answered = ref(false);
const answerStatus = ref('');
const canQuickAnswer = ref(true);
const quickAnswerDisabled = ref(false);
const quickAnswerResult = ref('');
const showResultDialog = ref(false);

const options = computed(() => questions.value[currentQuestion.value]?.options || []);

const quickAnswerText = computed(() => {
  return quickAnswerDisabled.value ? '抢答中...' : '抢答';
});

let timer = null;

// 开始倒计时
const startTimer = () => {
  clearInterval(timer);
  timeLeft.value = 15;
  timer = setInterval(() => {
    timeLeft.value--;
    if (timeLeft.value <= 0) {
      clearInterval(timer);
      if (!answered.value) {
        showToast('时间到！');
        nextQuestion();
      }
    }
  }, 1000);
};

// 抢答题目
const grabQuestion = () => {
  quickAnswerDisabled.value = true;

  // 模拟抢答网络请求
  setTimeout(() => {
    const success = Math.random() > 0.3; // 70%成功率
    quickAnswerResult.value = success ? 'success' : 'fail';
    showResultDialog.value = true;

    if (success) {
      canAnswer.value = true;
      startTimer();
    } else {
      quickAnswerDisabled.value = false;
      canQuickAnswer.value = false;
      setTimeout(() => {
        canQuickAnswer.value = true;
      }, 2000);
    }
  }, 800);
};

// 提交答案
const submitAnswer = (answer) => {
  answered.value = true;
  clearInterval(timer);

  const correct = answer === questions.value[currentQuestion.value].correctAnswer;
  answerStatus.value = correct ? 'correct' : 'wrong';

  // 显示结果反馈
  showToast(correct ? '回答正确！' : '回答错误！');

  // 1秒后自动下一题
  setTimeout(() => {
    nextQuestion();
  }, 1000);
};

// 下一题
const nextQuestion = () => {
  if (currentQuestion.value < questions.value.length - 1) {
    currentQuestion.value++;
    resetQuestionState();
  } else {
    showDialog({
      title: '提示',
      message: '已经是最后一题了',
      confirmButtonText: '查看结果',
    }).then(() => {
      // 跳转到结果页面
      // $router.push('/result');
    });
  }
};

// 重置题目状态
const resetQuestionState = () => {
  canAnswer.value = false;
  answered.value = false;
  answerStatus.value = '';
  quickAnswerDisabled.value = false;
  quickAnswerResult.value = '';
  showResultDialog.value = false;
  clearInterval(timer);
};

// 获取选项颜色
const getOptionColor = (option) => {
  if (!answered.value) return '#1989fa';
  if (option.value === questions.value[currentQuestion.value].correctAnswer) {
    return '#07c160';
  }
  if (answerStatus.value === 'wrong' && option.value === selectedAnswer.value) {
    return '#ee0a24';
  }
  return '#1989fa';
};

onMounted(() => {
  startTimer();
});

onUnmounted(() => {
  clearInterval(timer);
});
</script>

<style scoped>
.quick-answer-container {
  padding-bottom: 80px;
}

.question-area {
  padding: 16px;
  background-color: #fff;
  margin: 10px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  position: relative;
}

.timer {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 16px;
  font-weight: bold;
  color: #1989fa;
}

.timer.warning {
  color: #ee0a24;
  animation: pulse 1s infinite;
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

.question-content {
  margin-top: 20px;
}

.question-content h3 {
  color: #333;
  margin-bottom: 10px;
}

.question-content p {
  color: #666;
  font-size: 16px;
  line-height: 1.5;
}

.options-area {
  padding: 0 16px;
  margin-top: 20px;
}

.option-btn {
  margin-bottom: 12px;
  height: 48px;
  font-size: 16px;
}

.option-label {
  font-weight: bold;
  margin-right: 8px;
}

.quick-answer-btn {
  position: fixed;
  bottom: 20px;
  left: 16px;
  right: 16px;
}

.answer-status {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 15px;
  padding: 8px;
  border-radius: 4px;
  background-color: #f7f8fa;
}

.answer-status span {
  margin-left: 8px;
  font-size: 14px;
}

.result-content {
  padding: 20px;
  text-align: center;
  font-size: 16px;
}
</style>
